<template>
  <div class="cart-list">
    <div class="cart-list-item" v-for="(item, index) in test" :key="index">
      <div class="cart-list-shopkeeper">
        <span><i class="el-icon-s-goods"></i></span>
        <span class="shopkeeper-arrow"
          ><a href="https://baidu.com">{{ item.shopKeeper }}</a></span
        >
      </div>
      <div class="shop-action">
        <span></span>
        <span> {{ item.activity }}</span>
        <span><a href="#">领券</a></span>
      </div>

      <div class="cart-list-img">
        <div class="cart-list-checkbox" @click="btnSelect(item.gid)">
          <button
            type="checkbox"
            class="btn-no-active"
            v-if="!item.ischecked"
          ></button>
          <button type="checkbox" class="btn-active" v-else>
            <i class="el-icon-circle-check"></i>
          </button>
        </div>
        <div class="list-img">
          <img :src="item.ItemImage" alt="" />
        </div>
        <div class="img-context">
          <span>{{ item.goodsTitle }}</span>
          <p>{{ item.slected }}</p>
          <p>没满150减20</p>
          <p>￥{{ item.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCartList} from "@/network/detail.js";
export default {
  name: "cartlist",
  data() {
    return {
      test: [{
        shopKeeper: "柳丝木旗舰店",
        shopIcon: "店铺图标",
        activity: "3.8 20点开抢，每满200减20",
        ItemImage:
          "https://s5.mogucdn.com/mlcdn/c45406/200722_198lc5dfh935l81e5gag7ag7dj5ib_640x960.jpg",
        goodsTitle: "柳丝木防晒霜水感清透",
        slected:'37,米白色',
        content: "50g",
        price: 49.9,
      },{
        shopKeeper: "柳丝木旗舰店23",
        shopIcon: "店铺图标",
        activity: "3.8 20点开抢，每满200减20",
        ItemImage:
          "https://s5.mogucdn.com/mlcdn/c45406/200722_198lc5dfh935l81e5gag7ag7dj5ib_640x960.jpg",
        goodsTitle: "柳丝木防晒霜水感清透",
        slected:'37,米白色',
        content: "50g",
        price: 49.9,
      }],
      btnActive: true,
    };
  },
  created() {
    this.getCartData();
  },
  methods: {
    //从store里获取购物车数据
    getCartData() {
      getCartList().then(res =>{
        console.log('购物车--',res)
      //   this.goodsInfo = {
      //   shopKeeper: "柳丝木旗舰店",
      //   shopIcon: "店铺图标",
      //   activity: "3.8 20点开抢，每满200减20",
      //   image:
      //     "https://s5.mogucdn.com/mlcdn/c45406/200722_198lc5dfh935l81e5gag7ag7dj5ib_640x960.jpg",
      //   goodsTitle: "柳丝木防晒霜水感清透",
      //   slected:'37,米白色',
      //   content: "50g",
      //   price: 49.9,
      // }
      // console.log('==',this.goodsInfo)
      })
      // this.goodsInfo = this.$store.state.shopCart;
    },
    btnSelect(index) {
      console.log("勾选的商品编码", index);
      let obj = this.$store.state.shopCart;
      if (obj && obj.length) {
        for (let i in obj) {
          if (obj[i].gid === index) {
            this.$store.state.shopCart[i].ischecked =
              !this.$store.state.shopCart[i].ischecked;
          }
        }
      }
    },
  },
};
</script>

<style scoped>
.cart-list {
  margin: 49px 10px 0 10px;
}
.cart-list-item {
  margin: 10px auto;
  background: #fff;
  border-radius: 10px;
}
.cart-list-img .list-img {
  width: 120px;
  height: 120px;
  float: left;
}
.cart-list-checkbox {
  width: 32px;
  height: 120px;
  line-height: 120px;
  float: left;
}
.btn-no-active {
  border: 1px solid grey;
  height: 16px;
  width: 16px;
  border-radius: 50%;
}
.btn-active {
  border: none;
  color: var(--tint-color);
}
/* 父元素清除浮动 */
.cart-list-img::after {
  content: "";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
}
.cart-list-img .img-content {
}
.shopkeeper-arrow::after {
  content: ">";
}
.cart-list-img img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}
</style>